<script setup>
import { ref, reactive, defineEmits } from 'vue'
import Note from './person/note.vue'
const shouRights = ref(false)
const updates = (formsValue) => {
  console.log(formsValue);

  if (typeof formsValue === 'object' && formsValue.name !== '') {
    shouRights.value = false
    lists.push({ ...formsValue })
  } else {
    shouRights.value = false
  }
}


let yins = ref(false)
let shows = ref(true)
let shang = ref(false)
let xia = ref(true)

const emit = defineEmits(['update'])

const getTop = () => {
  emit('update')
}

const lists = reactive([
  {
    id: 1,
    name: '心态放平，格局放大，成事在天，谋事在人'
  },
  {
    id: 2,
    name: '心态放平，格局放大，成事在天，谋事在人'
  }
])

const lik = () => {
  yins.value = true
  shows.value = false
}

//右边弹框
const rightList = () => {
  shouRights.value = true
}
</script>
<template>
  <div class="appl">
    <div class="appls">
      <div class="topNav">
        <van-icon name="arrow-left" @click="getTop" />
        <span style="font-weight: bold;">我的收藏</span>
        <span style="width: 20px;"></span>
      </div>
      <div class="postAb" @click="rightList">+</div>
      <div class="inputs" @click="lik">
        <div class="rights" v-if="shows">
          <p><van-icon name="search" /></p>
          <p>搜索</p>
        </div>
        <input type="text" placeholder="搜索人名，群名，标签等" v-if="yins">
      </div>
      <div class="tans">
        <div class="t_right">
          <span>最近使用</span>
          <span>笔记</span>
        </div>
        <div class="t_left">
          <p v-if="xia" @click="shangs">ᐯ</p>
          <p v-if="shang" @click="xias">ᐱ</p>
        </div>
      </div>
    </div>
    <div class="ovefl">
      <div class="yesl" v-for="item in lists" :key="item.id">
        <div class="yes_o">
          <p>{{ item.name }}</p>
        </div>
        <div class="yes_y">
          <p>名字</p>
          <p>年月日</p>
        </div>
      </div>
    </div>
    <Transition name="slide-left" mode="out-in">
      <Note v-if="shouRights" @updates="updates" />
    </Transition>
  </div>
</template>
<style scoped>
/* 定义进入动画的 CSS 类 */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(100%);
  /* 初始位置在右侧 */
}

.slide-left-enter-to,
.slide-left-leave-from {
  transform: translateX(0);
  /* 目标位置在原位 */
}

.topNav {
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: space-between;
  align-items: center;
}

.van-popup--top {
  top: 90px;
  left: 0;
  width: 100%;
}

.yes_y {
  height: 50px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  line-height: 45px;
  padding: 0 18px 0 18px;
}

.yes_o {
  height: 60px;
  margin-top: 10px;
  line-height: 50px;

  p {
    margin-left: 25px;
  }
}

.yesl {
  width: 355px;
  border-radius: 7px 7px 7px 7px;
  background-color: #fff;
}

.ovefl {
  height: calc(100vh - 140px);
  overflow-y: auto;
}

.appls {
  width: 100%;
  height: 140px;
}

.t_left {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #c1bebe;
  margin-right: 8px;
  line-height: 20px;
  text-align: center;
  font-size: 15px;
  color: #7a7979;
  z-index: 1;
}

.t_right {
  width: 130px;
  display: flex;
  justify-content: space-between;
}

.t_right {
  color: rgb(117, 155, 215);
}

.tans {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inputs input {
  width: 326px;
  height: 30px;
  margin-left: 14px;
  border: 0;
}

.rights {
  width: 80px;
  height: 35px;
  margin: 0 auto;
  display: flex;
}

.inputs {
  width: 355px;
  height: 40px;
  background-color: #fff;
  line-height: 40px;
  border-radius: 7px 7px 7px 7px;
}

.postAb {
  width: 22px;
  height: 22px;
  border: 2px solid #161616;
  border-radius: 50%;
  text-align: center;
  line-height: 19px;
  position: absolute;
  font-size: 26px;
  right: 18px;
  top: 15px;
}

.appl {
  height: 100vh;
  padding: 0 10px 0 10px;
  background-color: #ebe9e9;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2009;
}
</style>
